<template>
  <div id="userManagement">
    <c-title :hide="false" text="会员管理"></c-title>
    <div class="searchBox">
      <i class="iconfont icon-member-left" @click="blackGo"></i>
      <div class="searchMin">
        <i class="iconfont icon-all_search_2"></i>
        <van-field
          v-model="keyWord"
          @blur="fieldChange"
          placeholder="搜索会员昵称/手机号"
        />
      </div>
    </div>
    <van-tabs v-model="active" @change="changeTap">
      <van-tab title="债权人"></van-tab>
      <van-tab title="VIP"></van-tab>
    </van-tabs>
    <div class="listbox">
      <template v-if="active == 0">
        <div class="list" v-for="(item, index) in listData" :key="index">
          <div class="lsitTop">
            <div class="img" v-if="item.has_one_owner_member">
              <img :src="item.has_one_owner_member.avatar" alt="" />
            </div>
            <div class="user">
              <div class="name" v-if="item.has_one_owner_member">
                {{ item.has_one_owner_member.nickname }}
                <div class="grade">{{ item.debtor_uid }}</div>
              </div>
              <div class="time">化债期：{{ item.end_time_str }}</div>
            </div>
            <div class="typeTxt">{{ item.status_name }}</div>
          </div>
          <div class="lisConten">
            <div class="lis">
              <div class="price">￥{{ item.total_credit || 0 }}</div>
              <div class="lisTxt">总提货券</div>
            </div>
            <div class="lis">
              <div class="price">
                ￥{{item.sum_credit}}
              </div>
              <div class="lisTxt">剩余提货券</div>
            </div>
            <div class="lis">
              <div class="price">{{ item.has_many_order_count }}</div>
              <div class="lisTxt">订单数</div>
            </div>
          </div>
          <div class="listBottom">
            <div class="listBottom_txt">
              身份有效期：{{ item.has_one_debtor.end_time_str }}
            </div>
            <div class="renew" @click="renewTap(item)" v-if="item.has_one_debtor.status == '-1' || item.has_one_debtor.status == '1'">
              续费
            </div>
          </div>
        </div>
      </template>
      <template v-if="active == 1">
        <div class="list" v-for="(item, index) in listData" :key="index">
          <div class="lsitTop">
            <div class="img" v-if="item.has_one_vip_member">
              <img :src="item.has_one_vip_member.avatar" alt="" />
            </div>
            <div class="user">
              <div class="name" v-if="item.has_one_vip_member">
                {{ item.has_one_vip_member.nickname }}
                <div class="grade">{{ item.has_one_vip_member.uid }}</div>
              </div>
              <div class="time">化债期：{{ item.end_time_str }}</div>
            </div>
            <div class="typeTxt">{{ item.status_name }}</div>
          </div>
          <div class="contenVip" v-if="item.has_one_owner_member">
            <div class="contenVip_txt">债权人：</div>
            <div class="contenVip_img">
              <img :src="item.has_one_owner_member.avatar" alt="" />
            </div>
            <div class="contenVip_name">
              {{ item.has_one_owner_member.nickname }}
            </div>
            <div class="grade">{{ item.has_one_owner_member.uid }}</div>
          </div>
          <div class="lisConten lisConten2">
            <div class="lis">
              <div class="price">￥{{ item.common_credit }}</div>
              <div class="lisTxt">{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}</div>
            </div>
            <div class="lis">
              <div class="price">￥{{ item.order_count }}</div>
              <div class="lisTxt">订单数</div>
            </div>
            <div class="lis">
              <div class="price">￥{{ item.order_price }}</div>
              <div class="lisTxt">订单金额</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <van-popup
      v-model="RenewShow"
      position="bottom"
      :style="{ height: '15.36rem', borderRadius: '0.31rem 0.31rem 0rem 0rem' }"
      closeable
    >
      <div class="shopShowTxt">续费</div>
      <div class="flexCell">
        <div>
          当前拥有商品数量：{{
            active == 0 ? owner_goods_count : vip_goods_count
          }}
        </div>
        <div class="right">
          <div class="pay" @click="toDetail">
            购买商品
            <i class="iconfont icon-member_right"></i>
          </div>
        </div>
      </div>
      <div class="flexCell">
        <div>充值数量</div>
        <div class="right">
          <van-stepper
            class="pay"
            v-model="goodsTotal"
            theme="round"
            button-size="22"
          />
        </div>
      </div>
      <div class="btn" @click="renewPost">续费</div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      keyWord: "",
      active: 0,
      // 债务人2，债权人1，vip3
      member_type: "",
      listData: [],
      // 债权人拥有商品次数
      owner_goods_count: "",
      // vip拥有商品次数
      vip_goods_count: "",
      // 充值数量
      goodsTotal: 1,
      RenewShow: false,
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
      plugin_setting:{},
    };
  },
  activated() {
    this.member_type = this.$route.params.type;
    this.RenewShow = false;
    this.init();
    this.getData();
    this.getUser();
    this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
  },
  methods: {
    addNum(totalA,totalB){
      return (Number(totalA) + Number(totalB)).toFixed(2)
    },
    renewPost() {
      if (
        this.goodsTotal >
        (this.active == 0 ? this.owner_goods_count : this.vip_goods_count)
      ) {
        Toast("拥有商品数量不足");
        return;
      }
      let json = {
        id: this.renewUserId,
        count: this.goodsTotal,
      };
      let urlStr =
        "plugin.debt-shop.frontend.debt-member.rechargeDebtMemberTime";
      $http
        .get(urlStr, json, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.RenewShow = false;
            this.$dialog.alert({ message: response.msg }).then(() => {
              this.init();
              this.getData();
            });
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toDetail() {
      let id = "";
      if (this.active == 0) {
        id = this.owner_goods_id;
      } else {
        id = this.vip_goods_id;
      }
      this.$router.push(
        this.fun.getUrl("goods", {
          id,
        })
      );
    },
    renewTap(item) {
      this.RenewShow = true;
      this.renewUserId = item.has_one_debtor.id;
    },
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.listData = [];
    },
    blackGo() {
      this.$router.go(-1);
    },
    fieldChange() {
      this.init();
      this.getData();
    },
    changeTap() {
      this.init();
      this.getData();
    },
    getUser() {
      $http
        .get("plugin.debt-shop.frontend.debt-member.applyData", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.owner_goods_count = response.data.debtor_goods_count;
            this.owner_goods_id = response.data.debtor_goods_id;
            this.vip_goods_id = response.data.vip_goods_id;
            this.vip_goods_count = response.data.vip_goods_count;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getData() {
      let urlStr = "";
      if (this.active == 0) {
        urlStr = "plugin.debt-shop.frontend.debtor.ownerList";
      } else {
        urlStr = "plugin.debt-shop.frontend.debtor.vipList";
      }
      $http
        .get(urlStr, { member_kwd: this.keyWord }, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let urlStr = "";
        if (this.active == 0) {
          urlStr = "plugin.debt-shop.frontend.debtor.ownerList";
        } else {
          urlStr = "plugin.debt-shop.frontend.debtor.vipList";
        }
        $http
          .get(
            urlStr,
            {
              member_kwd: this.keyWord,
              page: that.page,
            },
            "加载中"
          )
          .then(
            function (response) {
              that.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                that.listData = that.listData.concat(myData); //数组拼接
              } else {
                that.page = that.page - 1;
                that.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
    components: {},
  },
};
</script>
<style lang="scss" scoped>
#userManagement {
  .searchBox {
    display: flex;
    padding: 0.44rem 1.16rem 0.44rem 0.94rem;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    .searchMin {
      width: 20rem;
      height: 1.88rem;
      background-color: #eff0f1;
      border-radius: 0.94rem;
      display: flex;
      align-items: center;
      padding: 0 1rem;

      .iconfont {
        margin-right: 0.44rem;
        color: #999;
      }

      .van-cell {
        flex: 1;
        padding: 0;
        background-color: #eff0f1;
      }
    }
  }

  .listbox {
    padding: 0.63rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .list {
      width: 100%;
      padding: 0.7rem 0.81rem;
      box-sizing: border-box;
      background: #fff;
      border-radius: 0.31rem;
      margin-bottom: 0.625rem;

      .listBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listBottom_txt {
          font-size: 0.69rem;
          color: #7e7e7e;
        }

        .renew {
          width: 4.09rem;
          height: 1.78rem;
          background-color: #f15353;
          border-radius: 0.88rem;
          color: #fff;
          text-align: center;
          line-height: 1.78rem;
        }
      }

      .contenVip {
        display: flex;
        align-items: center;
        font-size: 0.69rem;
        color: #7e7e7e;
        margin-top: 0.81rem;

        .contenVip_txt {
          margin-right: 0.41rem;
        }

        .grade {
          padding: 0 0.325rem;
          height: 1rem;
          background-color: #f15353;
          border-radius: 0.47rem;
          background-color: #feeded;
          font-size: 0.63rem;
          color: #f15353;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .contenVip_name {
          color: #2e2e2e;
          font-size: 0.69rem;
          margin-right: 0.44rem;
        }

        .contenVip_img {
          width: 1.06rem;
          height: 1.06rem;
          background-color: #6a6a6a;
          margin-right: 0.28rem;
          border-radius: 100%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }

      .lisConten2 {
        margin-top: 0.97rem !important;
      }

      .lisConten {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.47rem;
        margin-bottom: 1.59rem;

        .lis {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          font-size: 0.69rem;

          .price {
            color: #f14e4e;
            margin-bottom: 0.72rem;
          }
        }
      }

      .lsitTop {
        display: flex;

        .typeTxt {
          font-size: 0.75rem;
          color: #f15353;
        }

        .user {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;

          .time {
            font-size: 0.63rem;
            color: #7e7e7e;
          }

          .name {
            display: flex;
            align-items: center;
            font-size: 0.88rem;
            color: #2f2f2f;

            .grade {
              padding: 0 0.325rem;
              height: 1.13rem;
              background-color: #feeded;
              border-radius: 0.56rem;
              font-size: 0.63rem;
              color: #f15353;
              text-align: center;
              line-height: 1.13rem;
              margin-left: 0.75rem;
            }
          }
        }

        .img {
          width: 2.5rem;
          height: 2.5rem;
          background-color: #b6b6b6;
          border-radius: 100%;
          margin-right: 0.53rem;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }
    }
  }
}

.shopShowTxt {
  width: 100%;
  text-align: center;
  font-size: 1.06rem;
  color: #202020;
  padding-top: 0.97rem;
  margin-bottom: 2rem;
}

.flexCell {
  padding: 0 0.91rem 0 1.06rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.94rem;

  .right {
    display: flex;
    align-items: center;

    .pay {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      color: #f14e4e;
    }
  }
}

.btn {
  margin: 0 auto;
  width: 20.31rem;
  height: 2.5rem;
  background-color: #f15353;
  border-radius: 1.25rem;
  font-size: 0.88rem;
  color: #fff;
  text-align: center;
  line-height: 2.5rem;
}
</style>
